/*
  page.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowLeft,
  Braces,
  CheckCircle2,
  Database,
  FileText,
  FlaskConical,
  Github,
  ScrollText,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { Reveal } from "@/components/reveal";
import { SectionHeading } from "@/components/section-heading";
import { getResearchPaper, allResearchPapers } from "@/lib/research";
import { researchDetails } from "@/lib/research-details";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export function generateStaticParams() {
  return allResearchPapers
    .filter((p) => researchDetails.some((d) => d.slug === p.slug))
    .map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const paper = getResearchPaper(slug);
  const detail = researchDetails.find((d) => d.slug === slug);
  if (!paper || !detail) return {};
  return {
    title: `${paper.title} — ${paper.num}`,
    description: detail.hero.subheadline,
  };
}

export default async function ResearchDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const paper = getResearchPaper(slug);
  const detail = researchDetails.find((d) => d.slug === slug);
  if (!paper || !detail) notFound();

  return (
    <article className="mx-auto max-w-4xl px-4 py-16 sm:px-6">
      <Reveal>
        <Link
          href="/research"
          className="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.12em] text-muted-foreground transition-colors hover:text-primary"
        >
          <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
          All research
        </Link>
      </Reveal>

      {/* Header */}
      <Reveal className="mt-10">
        <header>
          <p className="flex flex-wrap items-center gap-3 font-mono text-[0.68rem] font-medium uppercase tracking-[0.2em] text-primary">
            <span aria-hidden="true" className="h-px w-6 bg-primary/60" />
            {paper.num}
            {paper.pages && (
              <span className="text-muted-foreground/80">· {paper.pages}</span>
            )}
            {paper.status && (
              <span className="text-muted-foreground/80">· {paper.status}</span>
            )}
          </p>
          <h1 className="mt-4 font-display text-3xl font-semibold leading-tight tracking-tight sm:text-[2.6rem] sm:leading-[1.12]">
            {paper.title}
          </h1>
          <p className="mt-5 max-w-2xl font-display text-lg font-medium leading-snug tracking-tight text-foreground/85 [font-style:italic] sm:text-xl">
            {detail.hero.headline}
          </p>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted-foreground">
            {detail.hero.subheadline}
          </p>
          <p className="mt-4 text-sm text-muted-foreground">
            Simon-Pierre Boucher —{" "}
            <a
              href="mailto:contact@spboucher.ai"
              className="text-primary hover:underline"
            >
              contact@spboucher.ai
            </a>
          </p>
          <div className="mt-6 flex flex-wrap gap-2">
            <a
              href={paper.pdf}
              target="_blank"
              rel="noopener noreferrer"
              className={buttonVariants({ size: "sm" })}
            >
              <FileText aria-hidden="true" />
              Paper PDF
            </a>
            {paper.repo && (
              <a
                href={paper.repo}
                target="_blank"
                rel="noopener noreferrer"
                className={buttonVariants({ variant: "outline", size: "sm" })}
              >
                <Github aria-hidden="true" />
                Code &amp; data repository
              </a>
            )}
            {paper.source && (
              <a
                href={paper.source}
                target="_blank"
                rel="noopener noreferrer"
                className={buttonVariants({ variant: "outline", size: "sm" })}
              >
                <Braces aria-hidden="true" />
                LaTeX source
              </a>
            )}
          </div>
        </header>
      </Reveal>

      {/* Headline findings */}
      {detail.findings.length > 0 && (
        <Reveal className="mt-14">
          <div className="grid grid-cols-2 gap-x-8 gap-y-8 sm:grid-cols-3">
            {detail.findings.map((f) => (
              <div key={f.label} className="border-t-2 border-foreground pt-3">
                <p className="font-display text-3xl font-semibold tracking-tight sm:text-4xl">
                  {f.value}
                </p>
                <p className="mt-1.5 font-mono text-[0.66rem] uppercase leading-relaxed tracking-[0.12em] text-muted-foreground">
                  {f.label}
                </p>
              </div>
            ))}
          </div>
        </Reveal>
      )}

      {/* Abstract */}
      <section className="mt-14">
        <Reveal>
          <SectionHeading title="Abstract" icon={ScrollText} />
        </Reveal>
        <Reveal delay={0.06}>
          <div className="mt-5 max-w-3xl space-y-4 border-l border-border pl-5 sm:pl-6">
            {detail.abstract.map((paragraph) => (
              <p
                key={paragraph.slice(0, 48)}
                className="text-sm leading-relaxed text-muted-foreground sm:text-[0.95rem]"
              >
                {paragraph}
              </p>
            ))}
          </div>
        </Reveal>
      </section>

      {/* Contributions */}
      {detail.contributions.length > 0 && (
        <section className="mt-14">
          <Reveal>
            <SectionHeading title="Key Results" icon={FlaskConical} />
          </Reveal>
          <ol className="mt-6 space-y-5">
            {detail.contributions.map((c, i) => (
              <Reveal key={c.title} delay={i * 0.05}>
                <li className="flex items-start gap-4 border-b border-border/60 pb-5 last:border-0">
                  <span
                    aria-hidden="true"
                    className="pt-0.5 font-mono text-sm font-semibold text-primary"
                  >
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-display text-base font-semibold tracking-tight">
                      {c.title}
                    </h3>
                    <p className="mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                      {c.description}
                    </p>
                  </div>
                </li>
              </Reveal>
            ))}
          </ol>
        </section>
      )}

      {/* Data & methodology */}
      <div className="mt-14 grid gap-12 md:grid-cols-2 md:gap-10">
        {detail.data.length > 0 && (
          <section>
            <Reveal>
              <SectionHeading title="Data" icon={Database} />
            </Reveal>
            <div className="mt-5 space-y-4">
              {detail.data.map((d, i) => (
                <Reveal key={d.title} delay={i * 0.05}>
                  <div className="border-l-2 border-primary/50 pl-4">
                    <h3 className="text-sm font-semibold">{d.title}</h3>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                      {d.description}
                    </p>
                  </div>
                </Reveal>
              ))}
            </div>
          </section>
        )}

        {detail.methodology.length > 0 && (
          <section>
            <Reveal>
              <SectionHeading title="Methodology" icon={FlaskConical} />
            </Reveal>
            <div className="mt-5 space-y-4">
              {detail.methodology.map((m, i) => (
                <Reveal key={m.title} delay={i * 0.05}>
                  <div className="border-l-2 border-border pl-4">
                    <h3 className="text-sm font-semibold">{m.title}</h3>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                      {m.description}
                    </p>
                  </div>
                </Reveal>
              ))}
            </div>
          </section>
        )}
      </div>

      {/* Reproducibility */}
      {detail.reproducibility.length > 0 && (
        <section className="mt-14">
          <Reveal>
            <SectionHeading title="Reproducibility" icon={Github} />
          </Reveal>
          <ul className="mt-5 grid gap-3 sm:grid-cols-2">
            {detail.reproducibility.map((item, i) => (
              <Reveal key={item} delay={i * 0.05} className="h-full">
                <li className="flex h-full items-start gap-3 border border-border bg-card px-4 py-3.5 shadow-[var(--shadow-soft)]">
                  <CheckCircle2
                    className="mt-0.5 h-4 w-4 shrink-0 text-primary"
                    aria-hidden="true"
                  />
                  <span className="text-sm leading-relaxed text-foreground/85">
                    {item}
                  </span>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>
      )}

      {/* Keywords + CTA */}
      <Reveal className="mt-14">
        <footer className="border-t-2 border-foreground pt-6">
          <div className="flex flex-wrap gap-1.5">
            {detail.keywords.map((k) => (
              <Badge key={k} variant="outline">
                {k}
              </Badge>
            ))}
          </div>
          <div className="mt-6 flex flex-wrap gap-2">
            <a
              href={paper.pdf}
              target="_blank"
              rel="noopener noreferrer"
              className={buttonVariants({ size: "sm" })}
            >
              <FileText aria-hidden="true" />
              Read the paper (PDF)
            </a>
            {paper.repo && (
              <a
                href={paper.repo}
                target="_blank"
                rel="noopener noreferrer"
                className={buttonVariants({ variant: "outline", size: "sm" })}
              >
                <Github aria-hidden="true" />
                Explore the repository
              </a>
            )}
          </div>
        </footer>
      </Reveal>
    </article>
  );
}